---
title: User Audio Control
description: Microphone control component with device selection and visualizer
component: UserAudioControl
---

The `UserAudioControl` component provides a comprehensive microphone control interface that includes microphone toggle functionality, device selection, and optional audio visualization. It integrates with the Pipecat Client SDK to automatically manage microphone state and device selection.

<LiveComponent language="tsx">
{`
  import { UserAudioComponent } from "@pipecat-ai/voice-ui-kit";

  <UserAudioComponent
    onClick={() => console.log("Toggle mic")}
    availableMics={[
      {deviceId: "mic1", label: "Built-in Microphone"},
      {deviceId: "mic2", label: "External USB Mic"},
    ]}
    selectedMic={{deviceId: "mic1", label: "Built-in Microphone"}}
    updateMic={(deviceId) => console.log("Selected:", deviceId)}
    isMicEnabled={true}
  />
`}
</LiveComponent>

---

## Component Variants

### UserAudioControl

The `UserAudioControl` component is the connected variant that automatically integrates with the Pipecat Client SDK. It must be used within a `PipecatClientProvider` context.

<Callout>
You must call `initDevices` on the client before using the component.
</Callout>

<LiveComponent language="tsx" withPipecat>
{`
  import { UserAudioControl } from "@pipecat-ai/voice-ui-kit";

  <UserAudioControl />
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    variant: {
      description: "Visual style variant of the button",
      type: '"primary" | "secondary" | "outline" | "destructive" | "ghost" | "link" | "active" | "inactive"',
      required: false,
      default: '"secondary"',
    },
    size: {
      description: "Size of the button component",
      type: '"sm" | "md" | "lg" | "xl"',
      required: false,
      default: '"md"',
    },
    state: {
      description: "Button state for visual feedback",
      type: '"default" | "active" | "inactive"',
      required: false,
      default: "undefined",
    },
    buttonProps: {
      description: "Props to pass to the main button component",
      type: "Partial<ButtonProps>",
      required: false,
      default: "undefined",
    },
    classNames: {
      description: "Custom CSS classes for different parts of the component",
      type: "{ button?: string; buttongroup?: string; dropdownMenuTrigger?: string; dropdownMenuContent?: string; dropdownMenuCheckboxItem?: string; activeText?: string; inactiveText?: string; }",
      required: false,
      default: "undefined",
    },
    dropdownButtonProps: {
      description: "Props to pass to the dropdown trigger button",
      type: "Partial<ButtonProps>",
      required: false,
      default: "undefined",
    },
    deviceDropDownProps: {
      description: "Props to pass to the device dropdown component",
      type: "Partial<DeviceDropDownComponentProps>",
      required: false,
      default: "undefined",
    },
    noDevicePicker: {
      description: "Whether to hide the device selection dropdown",
      type: "boolean",
      required: false,
      default: "false",
    },
    noVisualizer: {
      description: "Whether to hide the audio visualizer",
      type: "boolean",
      required: false,
      default: "false",
    },
    visualizerProps: {
      description: "Props to pass to the VoiceVisualizer component",
      type: "Partial<VoiceVisualizerProps>",
      required: false,
      default: "undefined",
    },
    noAudio: {
      description: "Whether to disable audio functionality entirely",
      type: "boolean",
      required: false,
      default: "false",
    },
    noAudioText: {
      description: "Text to display when audio is disabled",
      type: "string | null",
      required: false,
      default: '"Audio disabled"',
    },
    noIcon: {
      description: "Whether to hide the microphone icon",
      type: "boolean",
      required: false,
      default: "false",
    },
    activeText: {
      description: "Text to display when microphone is active",
      type: "string",
      required: false,
      default: "undefined",
    },
    inactiveText: {
      description: "Text to display when microphone is inactive",
      type: "string",
      required: false,
      default: "undefined",
    },
    children: {
      description: "Additional content to render inside the button",
      type: "React.ReactNode",
      required: false,
      default: "undefined",
    },
  }}
/>

### UserAudioComponent

The `UserAudioComponent` is the headless variant that accepts all microphone state and callbacks as props. This allows you to use it with any framework or state management solution.

<LiveComponent language="tsx" noInline>
{`
  import { UserAudioComponent } from "@pipecat-ai/voice-ui-kit";

  // Example with mock data
  const mockMics = [
    { deviceId: "mic1", label: "Built-in Microphone" },
    { deviceId: "mic2", label: "External USB Mic" },
  ];

  function Demo() {
    const [isMicEnabled, setIsMicEnabled] = React.useState(false);
    const [selectedMic, setSelectedMic] = React.useState(mockMics[0]);

    return (
      <UserAudioComponent
        isMicEnabled={isMicEnabled}
        onClick={() => setIsMicEnabled(!isMicEnabled)}
        availableMics={mockMics}
        selectedMic={selectedMic}
        updateMic={(deviceId) => {
          const mic = mockMics.find(m => m.deviceId === deviceId);
          if (mic) setSelectedMic(mic);
        }}
        activeText="Listening"
        inactiveText="Click to start"
      />
    );
  }

  render(<Demo />);
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    onClick: {
      description: "Callback function called when the microphone button is clicked",
      type: "() => void",
      required: false,
      default: "undefined",
    },
    isMicEnabled: {
      description: "Whether the microphone is currently enabled",
      type: "boolean",
      required: false,
      default: "false",
    },
    availableMics: {
      description: "Array of available microphone devices",
      type: "MediaDeviceInfo[]",
      required: false,
      default: "undefined",
    },
    selectedMic: {
      description: "Currently selected microphone device",
      type: "OptionalMediaDeviceInfo",
      required: false,
      default: "undefined",
    },
    updateMic: {
      description: "Callback function called when a microphone device is selected",
      type: "(deviceId: string) => void",
      required: false,
      default: "undefined",
    },
    variant: {
      description: "Visual style variant of the button",
      type: '"primary" | "secondary" | "outline" | "destructive" | "ghost" | "link" | "active" | "inactive"',
      required: false,
      default: '"secondary"',
    },
    size: {
      description: "Size of the button component",
      type: '"sm" | "md" | "lg" | "xl"',
      required: false,
      default: '"md"',
    },
    state: {
      description: "Button state for visual feedback",
      type: '"default" | "active" | "inactive"',
      required: false,
      default: "undefined",
    },
    buttonProps: {
      description: "Props to pass to the main button component",
      type: "Partial<ButtonProps>",
      required: false,
      default: "undefined",
    },
    classNames: {
      description: "Custom CSS classes for different parts of the component",
      type: "{ button?: string; buttongroup?: string; dropdownMenuTrigger?: string; dropdownMenuContent?: string; dropdownMenuCheckboxItem?: string; activeText?: string; inactiveText?: string; }",
      required: false,
      default: "undefined",
    },
    dropdownButtonProps: {
      description: "Props to pass to the dropdown trigger button",
      type: "Partial<ButtonProps>",
      required: false,
      default: "undefined",
    },
    deviceDropDownProps: {
      description: "Props to pass to the device dropdown component",
      type: "Partial<DeviceDropDownComponentProps>",
      required: false,
      default: "undefined",
    },
    noDevicePicker: {
      description: "Whether to hide the device selection dropdown",
      type: "boolean",
      required: false,
      default: "false",
    },
    noVisualizer: {
      description: "Whether to hide the audio visualizer",
      type: "boolean",
      required: false,
      default: "false",
    },
    visualizerProps: {
      description: "Props to pass to the VoiceVisualizer component",
      type: "Partial<VoiceVisualizerProps>",
      required: false,
      default: "undefined",
    },
    noAudio: {
      description: "Whether to disable audio functionality entirely",
      type: "boolean",
      required: false,
      default: "false",
    },
    noAudioText: {
      description: "Text to display when audio is disabled",
      type: "string | null",
      required: false,
      default: '"Audio disabled"',
    },
    noIcon: {
      description: "Whether to hide the microphone icon",
      type: "boolean",
      required: false,
      default: "false",
    },
    activeText: {
      description: "Text to display when microphone is active",
      type: "string",
      required: false,
      default: "undefined",
    },
    inactiveText: {
      description: "Text to display when microphone is inactive",
      type: "string",
      required: false,
      default: "undefined",
    },
    children: {
      description: "Additional content to render inside the button",
      type: "React.ReactNode",
      required: false,
      default: "undefined",
    },
  }}
/>

---

## Usage Examples

#### Basic Usage

The UserAudioControl component automatically manages microphone state and device selection.

<LiveComponent language="tsx" withPipecat>
{`
  import { UserAudioControl } from "@pipecat-ai/voice-ui-kit";

  <UserAudioControl />
`}
</LiveComponent>

#### Custom Text Labels

You can customize the text displayed when the microphone is active or inactive.

<LiveComponent language="tsx" withPipecat>
{`
  import { UserAudioControl } from "@pipecat-ai/voice-ui-kit";

  <UserAudioControl
    activeText="Listening..."
    inactiveText="Click to speak"
  />
`}
</LiveComponent>

#### Different Variants

The component supports different visual variants to match your design system.

<LiveComponent language="tsx" withPipecat>
{`
  import { UserAudioControl } from "@pipecat-ai/voice-ui-kit";

  <div className="flex gap-4">
    <UserAudioControl variant="primary" />
    <UserAudioControl variant="outline" />
    <UserAudioControl variant="ghost" />
  </div>
`}
</LiveComponent>

#### Different Sizes

You can use different sizes for the microphone control.

<LiveComponent language="tsx" withPipecat>
{`
  import { UserAudioControl } from "@pipecat-ai/voice-ui-kit";

  <div className="flex gap-4 items-center">
    <UserAudioControl size="sm" />
    <UserAudioControl size="md" />
    <UserAudioControl size="lg" />
    <UserAudioControl size="xl" />
  </div>
`}
</LiveComponent>

#### Without Device Picker

Hide the device selection dropdown for a simpler interface.

<LiveComponent language="tsx" withPipecat>
{`
  import { UserAudioControl } from "@pipecat-ai/voice-ui-kit";

  <UserAudioControl noDevicePicker />
`}
</LiveComponent>

#### Without Visualizer

Hide the audio visualizer for a minimal microphone button.

<LiveComponent language="tsx" withPipecat>
{`
  import { UserAudioControl } from "@pipecat-ai/voice-ui-kit";

  <UserAudioControl noVisualizer />
`}
</LiveComponent>

#### Disabled Audio State

Show a disabled state when audio functionality is not available.

<LiveComponent language="tsx" noInline>
{`
  import { UserAudioComponent } from "@pipecat-ai/voice-ui-kit";

  function Demo() {
    return (
      <UserAudioComponent
        noAudio={true}
        noAudioText="Microphone not available"
        isMicEnabled={false}
        onClick={() => {}}
      />
    );
  }

  render(<Demo />);
`}
</LiveComponent>

#### Custom Visualizer Configuration

Customize the audio visualizer appearance and behavior.

<LiveComponent language="tsx" withPipecat>
{`
  import { UserAudioControl } from "@pipecat-ai/voice-ui-kit";

  <UserAudioControl
    visualizerProps={{
      barCount: 15,
      barGap: 1,
      barMaxHeight: 30,
      barWidth: 2,
    }}
  />
`}
</LiveComponent>

#### Custom Device Dropdown Configuration

Customize the device dropdown behavior and appearance.

<LiveComponent language="tsx" withPipecat>
{`
  import { UserAudioControl } from "@pipecat-ai/voice-ui-kit";

  <UserAudioControl
    deviceDropDownProps={{
      menuLabel: "Select Microphone",
      placeholder: "Choose a microphone...",
    }}
  />
`}
</LiveComponent>

#### Custom Styling

Apply custom CSS classes to different parts of the component.

<LiveComponent language="tsx" withPipecat>
{`
  import { UserAudioControl } from "@pipecat-ai/voice-ui-kit";

  <UserAudioControl
    classNames={{
      button: "border-2 border-primary",
      dropdownMenuTrigger: "bg-primary text-white",
      activeText: "font-bold text-green-600",
      inactiveText: "text-gray-500",
    }}
  />
`}
</LiveComponent>

---

## Features

- **Microphone Toggle**: Click to enable/disable microphone input
- **Device Selection**: Built-in dropdown for selecting different microphone devices
- **Audio Visualization**: Optional real-time audio level visualization
- **Loading States**: Automatic loading indicators during connection setup
- **Accessible**: Includes proper ARIA labels and keyboard navigation
- **Responsive**: Adapts to different screen sizes and container widths
- **Theme Support**: Integrates with the Voice UI Kit theming system
- **Flexible**: Available in both connected and headless variants

## Integration

The connected `UserAudioControl` component uses several hooks from the Pipecat Client React SDK:
- `usePipecatClientMediaDevices` for device management
- `usePipecatClientTransportState` for connection state
- `PipecatClientMicToggle` for microphone control

This means it must be used within a `PipecatClientProvider` context to function properly.

The component will automatically:
- Fetch available microphone devices
- Display the currently selected microphone
- Handle device selection changes
- Manage microphone enable/disable state
- Show appropriate loading states during connection setup
- Update the Pipecat Client's microphone configuration

## Visual States

The component displays different visual states based on the microphone status:

- **Inactive**: Shows microphone off icon with inactive styling
- **Active**: Shows microphone on icon with active styling and visualizer
- **Loading**: Shows loading spinner during connection setup
- **Disabled**: Shows disabled state when audio is not available

## Device Management

The component includes a dropdown menu for device selection that:
- Lists all available microphone devices
- Shows the currently selected device
- Allows switching between devices
- Can be hidden with the `noDevicePicker` prop
- Integrates with the `DeviceDropDown` component
